import './index.scss'

/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable'
/** 导航配置*/
export default {
  name: 'micro-tab-nav-box',
  mixins: [microCreateMinis],
  props: {},
  data() {
    return {
      dialogChooseGoods: false, // 选择商品
      isGetChooseData: false, // 开始返会商品
      canChooseImagesNum: 1, // 可以选择的图片数量
      isGetChooseFeature: false, // 是否可以返回微页面
      dialogChoosePages: false, // 微页面弹窗
      isShowChooseImgBtn: false, // 是否显示出选择图片的按钮
      /** 选择图片的弹窗*/
      isGetChooseImages: false,
      dialogChooseImgVisible: false,
      tabActive: 0,
      formData: {
        imageSize: 80,
        textColor: '#464646',
        bg_color: '#FFFFFF',
        marginTop: 15,
        marginBottom: 15,
        lineNum: '1',
        type: '0',
        cols: '5',
        slideFlag: '0',
        nav: []
      },
      demoNav: [
        {
          title: '导航一'
        },
        {
          title: '导航二'
        },
        {
          title: '导航三'
        },
        {
          title: '导航四'
        },
        {
          title: '导航五'
        },
        {
          title: '导航六'
        },
        {
          title: '导航七'
        },
        {
          title: '导航八'
        },
        {
          title: '导航九'
        },
        {
          title: '导航十'
        }
      ],
      linkList: [
        {
          type: 1,
          title: '商品详情页',
          link: ''
        },
        {
          type: 2,
          title: '购物车',
          link: ''
        },
        {
          type: 3,
          title: '个人中心',
          link: ''
        },
        {
          type: 4,
          title: '活动页',
          link: ''
        }
      ],
      swiperActive: 0,
      commandInfo: {},
      isCacheImage: '',
      currentNav: 0,
      id: '',
      currentEditIndex: 0, // 当前编辑的图片
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun', // 我自己的验证规则函数  比如弹窗之类的
      errorTitle: '请填写完整信息'
    }
  },
  watch: {
  },
  components: {
    // 图片
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    chooseFeature: () => import('@/components/choose-feature/index.vue'),
    draggable
  },
  filters: {
    typeNameFilter(val) {
      let str = ''
      switch (val) {
        case 1:
          str = '商品详情页'
          break
        case 2:
          str = '购物车'
          break
        case 3:
          str = '个人中心'
          break
        case 4:
          str = '活动页'
          break
      }
      return str
    }
  },
  computed: {
    swiperHeight() {
      let height = ''
      let line = this.formData.lineNum
      if (this.formData.nav.length <= this.formData.cols) {
        if (this.formData.lineNum === '2') {
          line = '1'
        }
      }
      if (this.formData.type === '0') {
        height = line * (this.formData.imageSize / 2) + 24 * line;
        if (line === '2') {
          height += 5
        }
      } else if (this.formData.type === '1') {
        height = 24 * line
      }
      return height + 'px';
    },
    showNav() {
      const arr = []
      let navArr = []
      const navLen = this.formData.nav.length
      const maxItemNum = this.formData.cols * this.formData.lineNum
      if (navLen) {
        navArr = this.formData.nav
      } else {
        navArr = this.demoNav
      }
      if (navArr.length <= maxItemNum) {
        arr.push(navArr)
      } else {
        const maxLen = Math.ceil(navArr.length / maxItemNum)
        for (var i = 0; i < maxLen; i++) {
          arr.push(navArr.slice(i * maxItemNum, (i + 1) * maxItemNum))
        }
      }
      return arr
    },
    autoSlide() {
      return this.formData.slideFlag === '1'
    }
  },
  mounted() {

  },
  methods: {
    // 轮播切换
    swiperChange(val) {
      this.swiperActive = val
    },
    // 重置颜色
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.textColor = '#464646'
      } else if (type === 2) {
        this.formData.bg_color = '#FFFFFF'
      }
    },
    // 选择商品回调
    chooseGoodsFun($event) {
      console.log('$event', $event)
      if ($event.data.length) {
        this.setLinkInfo({
          title: $event.data[0].name,
          link: $event.data[0].id
        })
      }
      this.dialogChooseGoods = false
    },
    /** 设置跳转信息*/
    setLinkInfo(obj) {
      this.formData.nav[this.currentNav].id = obj.id
      this.formData.nav[this.currentNav].type = obj.type
      this.formData.nav[this.currentNav].microType = obj.microTitle
      this.formData.nav[this.currentNav].microTitle = obj.title
      this.formData.nav[this.currentNav].linkUrl = obj.link
      // this.formData.nav[this.currentNav].title = obj.title
      console.log('obj', obj)
      console.log('this.formData.nav', this.formData.nav)
    },
    /** 选择跳转路径*/
    command(eve) {
      this.isCacheImage = eve.isCacheImage || false
      this.commandInfo = eve.linkItem
      console.log('eve', eve)
      /* eslint-disable */
      if (eve.hasOwnProperty('currentHotEditIndex')) {
        this.currentHotEditIndex = eve.currentHotEditIndex
      }
      if (eve.hasOwnProperty('currentEditIndex')) {
        this.currentEditIndex = eve.currentEditIndex
      }
      if (eve.linkItem.type === 1) {
        this.dialogChooseGoods = true
        return
      }
      if (eve.linkItem.type === 4) {
        this.dialogChoosePages = true
        return
      }
      /* eslint-enable */
      // if (eve.linkItem.type === 1) {
      //   this.dialogChooseGoods = true
      //   return
      // }
      console.log('this.currentEditIndex', this.currentEditIndex)
      this.setLinkInfo({
        type: this.commandInfo.type,
        title: this.commandInfo.title,
        link: this.commandInfo.link
      })
    },
    getPicsUrl(arr) {
      console.log('arr', arr)
      // this.formData.imageList = arr
    },
    /** 添加导航*/
    addNav() {
      this.formData.nav.push({
        title: '', // nav 标题
        id: '', // id
        type: '', // 跳转类型
        linkTitle: '', // 对应名称
        linkUrl: '', // 对应链接
        img: ''
      })
    },
    choosePage(index, img = false) {
      console.log('index==', index)
      this.currentNav = index
      if (img) { // 选择图片
        this.$refs.pics.dialog = true
      } else {
        this.dialogChoosePages = true
      }
    },
    // 选择微页面回调
    chooseChooseFeaturesFun($event) {
      console.log('$event', $event)
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      if ($event.data.type === 0) {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
        console.log('$event.data', $event.data.path)
      } else {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.id,
          microTitle: microTitle
        })
      }
      // this.formData.nav[this.currentNav].id = $event.data.id
      // this.formData.nav[this.currentNav].microTitle = $event.data.title
      this.dialogChoosePages = false
    },
    /** 选择图片的回调*/
    chooseImagesEnd($item) {
      // this.dialogChooseImgVisible = false
      console.log('$item', $item)
      console.log('this.currentNav', this.currentNav)
      if ($item.data && $item.data.length) { // img
        this.formData.nav[this.currentNav].img = $item.data[0]
      }
    },
    /** 获取所有返回的图片*/
    returnAllImg(all) {
      this.isShowChooseImgBtn = (all.data.length)
    },
    /**
     * 开始验证
     * */
    checkData() {
      let is = true
      if (!this.formData.nav.length) {
        is = false
        this.errorTitle = '请添加导航'
      } else {
        this.formData.nav.forEach(item => {
          if (item.title === '') {
            is = false
            this.errorTitle = '请添加标题'
          }
          if(this.formData.type === '0'){
            if (item.img === '') {
              is = false
              this.errorTitle = '请添加图片'
            }
          }
          if (item.microTitle === '') {
            is = false
            this.errorTitle = '请选跳转信息'
          }
        })
      }

      this.myCheckResult(is)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
      this.showCheckForm()
      this.$message.error(this.errorTitle)
    }

  }
}
